//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    toView: 'a1',
    activeId: 'a1',
    category: [
      { name: '益禾堂', id: 'a1'},
      { name: '港饮之港', id: 'a2' },
      { name: '一点点', id: 'a3' },
      { name: '茶百道', id: 'a4' },
      { name: '蜜雪冰城', id: 'a5'},
      { name: '研茶', id: 'a6' },
      { name: '茶玛', id: 'a7' },
      { name: '私品茶道', id: 'a8' },
      { name: '书亦', id: 'a9' }

    ],
    content: [
      {
        title: '--益禾堂--', 
        options: [
          { src: 'yht.jpg', id: '001',text: '益禾烤奶'},
          { src: 'yht.jpg', id: '002', text: '杨枝甘露' },
          { src: 'yht.jpg', id: '003', text: '禾风奶绿'},
          { src: 'yht.jpg', id: '004', text: '云海大红袍'},
          { src: 'yht.jpg', id: '005',text: '益杯烧仙草' },
          { src: 'yht.jpg', id: '006',text: '益杯咖啡' },
          { src: 'yht.jpg', id: '007',text: '翠峰茉莉' },
          { src: 'yht.jpg', id: '008',text: '冻柠蜜' },
          { src: 'yht.jpg', id: '009',text: '金桔柠檬' },
          { src: 'yht.jpg', id: '010',text: '蜂蜜柚子茶' },
          { src: 'yht.jpg', id: '011',text: '益颗柠檬绿' },
          { src: 'yht.jpg', id: '012',text: '益杯百香果' },
          { src: 'yht.jpg', id: '013',text: '多肉西柚' },
          { src: 'yht.jpg', id: '014',text: '葡萄啵啵' },
          { src: 'yht.jpg', id: '015',text: '泷珠奶茶' },
          { src: 'yht.jpg', id: '016',text: '四季奶青' },
          { src: 'yht.jpg', id: '017',text: '宇治抹茶' },
          { src: 'yht.jpg', id: '018',text: '香醇可可' }
        ],
        id: 'a1'
      },
      {
        title: '--港饮之港--',
        options: [
          { src: 'gyzg.jpg', id: '019', text: '草莓椰奶' },
          { src: 'gyzg.jpg', id: '020' ,text: '金桔柠檬'},
          { src: 'gyzg.jpg', id: '021', text: '葡萄冻冻' },
          { src: 'gyzg.jpg', id: '022',text: '三兄弟奶茶' },
          { src: 'gyzg.jpg', id: '023',text: '曲奇可可' },
          { src: 'gyzg.jpg', id: '024',text: '皇家烤奶' },
          { src: 'gyzg.jpg', id: '025',text: '冰爽冻柠水' },
          { src: 'gyzg.jpg', id: '026',text: '手摇冻柠绿' },
          { src: 'gyzg.jpg', id: '027',text: '冻柠七' },
          { src: 'gyzg.jpg', id: '028',text: '桃桃椰奶' },
          { src: 'gyzg.jpg', id: '029',text: '全料烤椰奶' },
          { src: 'gyzg.jpg', id: '030',text: '芋泥奶茶' },
          { src: 'gyzg.jpg', id: '031',text: '抹茶红豆' },
          { src: 'gyzg.jpg', id: '032',text: '晶钻奶绿' },
          { src: 'gyzg.jpg', id: '033',text: '港式咖啡' },
          { src: 'gyzg.jpg', id: '034',text: '双料百香果' },
          { src: 'gyzg.jpg', id: '035',text: '桃桃乌龙' },
          { src: 'gyzg.jpg', id: '036',text: '霸王鲜柚' }
        ],
        id: 'a2'
      },
      {
        title: '--一点点--',
        options: [
          { src: 'ydd.jpg', id: '037', text: '波霸奶茶' },
          { src: 'ydd.jpg', id: '038', text: '焦糖奶茶' },
          { src: 'ydd.jpg', id: '039', text: '可可芭蕾' },
          { src: 'ydd.jpg', id: '040', text: '柠檬养乐多' },
          { src: 'ydd.jpg', id: '041',text: '茉莉绿茶' },
          { src: 'ydd.jpg', id: '042',text: '阿萨姆红茶' },
          { src: 'ydd.jpg', id: '043',text: '四季春茶' },
          { src: 'ydd.jpg', id: '044',text: '冻顶乌龙茶' },
          { src: 'ydd.jpg', id: '045',text: '养乐多绿' },
          { src: 'ydd.jpg', id: '046',text: '仙草奶冻' },
          { src: 'ydd.jpg', id: '047',text: '红茶玛奇朵' },
          { src: 'ydd.jpg', id: '048',text: '红茶拿铁' },
          { src: 'ydd.jpg', id: '049',text: '柠檬梅子' },
          { src: 'ydd.jpg', id: '050',text: '柠檬蜜' },
          { src: 'ydd.jpg', id: '051',text: '蜜茶' },
          { src: 'ydd.jpg', id: '052',text: '珍珠奶茶' },
          { src: 'ydd.jpg', id: '053',text: '椰果奶茶' },
          { src: 'ydd.jpg', id: '054',text: '柠檬汁' }
        ],
         id: 'a3'
      },
      {
        title: '--茶百道--',
        options: [
          { src: 'cbd.jpg', id: '055', text: '百香绿茶' },
          { src: 'cbd.jpg', id: '056', text: '酒酿芋圆' },
          { src: 'cbd.jpg', id: '057', text: '燕麦奶茶' },
          { src: 'cbd.jpg', id: '058', text: '奥利奥芝士' },
          { src: 'cbd.jpg', id: '059',text: '绿茶珍奶' },
          { src: 'cbd.jpg', id: '060',text: '四季春珍奶' },
          { src: 'cbd.jpg', id: '061',text: '统一布丁' },
          { src: 'cbd.jpg', id: '062',text: '可可奶茶' },
          { src: 'cbd.jpg', id: '063',text: '芋圆拿铁' },
          { src: 'cbd.jpg', id: '064',text: '波椰四季春' },
          { src: 'cbd.jpg', id: '065',text: '杨枝甘露' },
          { src: 'cbd.jpg', id: '066',text: '鲜榨柠檬汁' },
          { src: 'cbd.jpg', id: '067',text: '凤梨四季春' },
          { src: 'cbd.jpg', id: '068',text: '绿茶芝士' },
          { src: 'cbd.jpg', id: '069',text: '可可芝士' },
          { src: 'cbd.jpg', id: '070',text: '芭乐柠檬' },
          { src: 'cbd.jpg', id: '071',text: '红西柚绿茶' },
          { src: 'cbd.jpg', id: '072',text: '芒果芝士' }
        ],
        id: 'a4'
      },
      {
        title: '--蜜雪冰城--', 
        options: [
          { src: 'mxbc.jpg', id: '073',text: '益禾烤奶'},
          { src: 'mxbc.jpg', id: '074', text: '杨枝甘露' },
          { src: 'mxbc.jpg', id: '075', text: '禾风奶绿'},
          { src: 'mxbc.jpg', id: '076', text: '云海大红袍'},
          { src: 'mxbc.jpg', id: '077',text: '益杯烧仙草' },
          { src: 'mxbc.jpg', id: '078',text: '益杯咖啡' },
          { src: 'mxbc.jpg', id: '079',text: '翠峰茉莉' },
          { src: 'mxbc.jpg', id: '080',text: '冻柠蜜' },
          { src: 'mxbc.jpg', id: '081',text: '金桔柠檬' },
          { src: 'mxbc.jpg', id: '082',text: '蜂蜜柚子茶' },
          { src: 'mxbc.jpg', id: '083',text: '益颗柠檬绿' },
          { src: 'mxbc.jpg', id: '084',text: '益杯百香果' },
          { src: 'mxbc.jpg', id: '085',text: '多肉西柚' },
          { src: 'mxbc.jpg', id: '086',text: '葡萄啵啵' },
          { src: 'mxbc.jpg', id: '087',text: '泷珠奶茶' },
          { src: 'mxbc.jpg', id: '088',text: '四季奶青' },
          { src: 'mxbc.jpg', id: '089',text: '宇治抹茶' },
          { src: 'mxbc.jpg', id: '090',text: '香醇可可' }
        ],
        id: 'a5'
      },
      {
        title: '--研茶--',
        options: [
          { src: 'yc.jpg', id: '091', text: '草莓椰奶' },
          { src: 'yc.jpg', id: '092' ,text: '金桔柠檬'},
          { src: 'yc.jpg', id: '093', text: '葡萄冻冻' },
          { src: 'yc.jpg', id: '094',text: '三兄弟奶茶' },
          { src: 'yc.jpg', id: '095',text: '曲奇可可' },
          { src: 'yc.jpg', id: '096',text: '皇家烤奶' },
          { src: 'yc.jpg', id: '097',text: '冰爽冻柠水' },
          { src: 'yc.jpg', id: '098',text: '手摇冻柠绿' },
          { src: 'yc.jpg', id: '099',text: '冻柠七' },
          { src: 'yc.jpg', id: '100',text: '桃桃椰奶' },
          { src: 'yc.jpg', id: '101',text: '全料烤椰奶' },
          { src: 'yc.jpg', id: '102',text: '芋泥奶茶' },
          { src: 'yc.jpg', id: '103',text: '抹茶红豆' },
          { src: 'yc.jpg', id: '104',text: '晶钻奶绿' },
          { src: 'yc.jpg', id: '105',text: '港式咖啡' },
          { src: 'yc.jpg', id: '106',text: '双料百香果' },
          { src: 'yc.jpg', id: '107',text: '桃桃乌龙' },
          { src: 'yc.jpg', id: '108',text: '霸王鲜柚' }
        ],
        id: 'a6'
      },
      {
        title: '--茶玛--',
        options: [
          { src: 'cm.jpg', id: '109', text: '波霸奶茶' },
          { src: 'cm.jpg', id: '110', text: '焦糖奶茶' },
          { src: 'cm.jpg', id: '111', text: '可可芭蕾' },
          { src: 'cm.jpg', id: '112', text: '柠檬养乐多' },
          { src: 'cm.jpg', id: '113',text: '茉莉绿茶' },
          { src: 'cm.jpg', id: '114',text: '阿萨姆红茶' },
          { src: 'cm.jpg', id: '115',text: '四季春茶' },
          { src: 'cm.jpg', id: '116',text: '冻顶乌龙茶' },
          { src: 'cm.jpg', id: '117',text: '养乐多绿' },
          { src: 'cm.jpg', id: '118',text: '仙草奶冻' },
          { src: 'cm.jpg', id: '119',text: '红茶玛奇朵' },
          { src: 'cm.jpg', id: '120',text: '红茶拿铁' },
          { src: 'cm.jpg', id: '121',text: '柠檬梅子' },
          { src: 'cm.jpg', id: '122',text: '柠檬蜜' },
          { src: 'cm.jpg', id: '123',text: '蜜茶' },
          { src: 'cm.jpg', id: '124',text: '珍珠奶茶' },
          { src: 'cm.jpg', id: '125',text: '椰果奶茶' },
          { src: 'cm.jpg', id: '126',text: '柠檬汁' }
        ],
         id: 'a7'
      },
      {
        title: '--私品茶道--',
        options: [
          { src: 'spcd.jpg', id: '127', text: '百香绿茶' },
          { src: 'spcd.jpg', id: '128', text: '酒酿芋圆' },
          { src: 'spcd.jpg', id: '129', text: '燕麦奶茶' },
          { src: 'spcd.jpg', id: '130', text: '奥利奥芝士' },
          { src: 'spcd.jpg', id: '131',text: '绿茶珍奶' },
          { src: 'spcd.jpg', id: '132',text: '四季春珍奶' },
          { src: 'spcd.jpg', id: '133',text: '统一布丁' },
          { src: 'spcd.jpg', id: '134',text: '可可奶茶' },
          { src: 'spcd.jpg', id: '135',text: '芋圆拿铁' },
          { src: 'spcd.jpg', id: '136',text: '波椰四季春' },
          { src: 'spcd.jpg', id: '137',text: '杨枝甘露' },
          { src: 'spcd.jpg', id: '138',text: '鲜榨柠檬汁' },
          { src: 'spcd.jpg', id: '139',text: '凤梨四季春' },
          { src: 'spcd.jpg', id: '140',text: '绿茶芝士' },
          { src: 'spcd.jpg', id: '141',text: '可可芝士' },
          { src: 'spcd.jpg', id: '142',text: '芭乐柠檬' },
          { src: 'spcd.jpg', id: '143',text: '红西柚绿茶' },
          { src: 'spcd.jpg', id: '144',text: '芒果芝士' }
        ],
        id: 'a8'
      },
      {
        title: '--书亦烧仙草--',
        options: [
          { src: 'sysxc.jpg', id: '145', text: '百香绿茶' },
          { src: 'sysxc.jpg', id: '146', text: '酒酿芋圆' },
          { src: 'sysxc.jpg', id: '147', text: '燕麦奶茶' },
          { src: 'sysxc.jpg', id: '148', text: '奥利奥芝士' },
          { src: 'sysxc.jpg', id: '149',text: '绿茶珍奶' },
          { src: 'sysxc.jpg', id: '150',text: '四季春珍奶' },
          { src: 'sysxc.jpg', id: '151',text: '统一布丁' },
          { src: 'sysxc.jpg', id: '152',text: '可可奶茶' },
          { src: 'sysxc.jpg', id: '153',text: '芋圆拿铁' },
          { src: 'sysxc.jpg', id: '154',text: '波椰四季春' },
          { src: 'sysxc.jpg', id: '155',text: '杨枝甘露' },
          { src: 'sysxc.jpg', id: '156',text: '鲜榨柠檬汁' },
          { src: 'sysxc.jpg', id: '157',text: '凤梨四季春' },
          { src: 'sysxc.jpg', id: '158',text: '绿茶芝士' },
          { src: 'sysxc.jpg', id: '159',text: '可可芝士' },
          { src: 'sysxc.jpg', id: '160',text: '芭乐柠檬' },
          { src: 'sysxc.jpg', id: '161',text: '红西柚绿茶' },
          { src: 'sysxc.jpg', id: '162',text: '芒果芝士' }
        ],
        id: 'a9'
      }
    ],
  },
  //事件处理函数
  onLoad: function () {
    this.setData({
      toView: 'a1',
      heightArr: []
    })
    let query = wx.createSelectorQuery();
    query.selectAll('.catefory-main').boundingClientRect((rect)=> {
      rect.forEach(ele => {
        this.calculateHeight(ele.height);
      })
    }).exec();
  },
  clickItem(e) {
    this.setData({
      activeId: e.currentTarget.dataset.id,
      toView: e.currentTarget.dataset.id
    })
  },
  scroll(e) {
    let scrollHeight = e.detail.scrollTop;
    let index = this.calculateIndex(this.data.heightArr,scrollHeight);
    this.setData({
      activeId: 'a'+index
    })

  },
  // 计算滚动的区间
  calculateHeight(height) {
    if(!this.data.heightArr.length) {
      this.data.heightArr.push(height)
    }else {
      this.data.heightArr.forEach(ele => {
        height += ele
      })
      this.data.heightArr.push(height);
    }
  },
  // 计算左边选中的下标
  calculateIndex(arr, scrollHeight) {
    let index= '';
    for(let i =0;i<arr.length;i++) {
      if (scrollHeight >= 0 && scrollHeight < arr[0]){
        index = 0;
      }else if(scrollHeight >= arr[i-1] && scrollHeight < arr[i]){
        index = i;
      }
    }
    return index+1;
  }
})

